<template>
  <div class="publicSort">
    <div
      v-for="(base, i) in baseList"
      :key="i"
      class="sort-box"
      @click="changeSort(base, i)"
    >
      <div :style="{ cursor: isCursor }">{{ base.label }}</div>
      <div class="sort-con">
        <div
          v-for="(item, index) in sortIconList"
          :key="index"
          class="s-item"
          :class="{ active: base.order == item.name }"
        >
          <el-icon v-if="item.name == 'asc'"><CaretTop /></el-icon>
          <el-icon v-else="item.name == 'desc'"><CaretBottom /></el-icon>
<!--          <i :class="`iconfont ${item.icon}`"></i>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {defineProps,defineEmits, watch,ref} from 'vue';
const emit=defineEmits(['changeSort']);
const props=defineProps({
  orderCondition: {
      type: Array,
      default() {
        return []
      },
    },
    isCursor: {
      type: String,
      default: 'pointer',
    },
    category: {
      type: String,
      default: '',
    },
    flag: {
      type: Number,
      default: 0,
    },
})
const isActive=ref(0);
const baseList=ref<any>([]);
const sortIconList=ref([
{
          name: 'asc',
          icon: 'el-icon-caret-top',
        },
        {
          name: 'desc',
          icon: 'el-icon-caret-bottom',
        },
]);
  watch(()=>props.orderCondition,(newVal)=>{
    baseList.value = newVal
  },
  {
    deep: true,
    immediate: true,
  }
  )
 const changeSort=(item, index)=> {
      emit('changeSort', item, index)
    }
</script>
<style lang="scss" scoped>
.publicSort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  margin-right: 10px;
  .sort-box {
    display: flex;
    align-items: center;
    margin-right: 35px;
  }
  .sort-con {
    .s-item {
      cursor: pointer;
      position: relative;
      left: 10px;
      &.active {
        .s-item {
          color: $-v-color-primary;
        }
      }
      i {
        font-size: 14px;
        color: #8590b3;
      }
      &.active {
        i {
          color: $-v-color-primary;
        }
      }
    }
    .s-item:first-child {
      height: 6px;
    }
  }
}
</style>
